<template>
       <div class="matecon"
       @mousedown="onHandleDownitem" 
       @contextmenu="onContextmenu" 
        >
          <!-- 容器内壁 点击四角进行缩放 点击 中间 进行移动 -->
          <!-- 左上 -->
          <div v-if="modelValue.uid==selectid" class="allowpointer tl" data-set="tl"></div>
          <!-- 右上 -->
          <div v-if="modelValue.uid==selectid" class="allowpointer dl" data-set="dl"></div>
          <!-- 左下 -->
          <div v-if="modelValue.uid==selectid" class="allowpointer tr" data-set="tr"></div>
          <!-- 右下 -->
          <div v-if="modelValue.uid==selectid" class="allowpointer dr" data-set="dr"></div> 
          <div class="cons">
               <!-- 本地组件&远程组件 -->
               <component :is="temps[modelValue.component]"></component> 
          </div>
       </div>
</template>
<script lang="ts" setup>
import { onMounted,ref } from 'vue';
import { temps } from '@/components/index';
const props = defineProps(['modelValue','selectid']);
const emits = defineEmits(['update:modelValue','onmousedown','onContextmenu']);
const iskey = ref<Boolean>(false);  
const infos = ref({});
onMounted(()=>{
      infos.value = props.modelValue;
}) 
// 右击
const onContextmenu = (e)=>{
     e.preventDefault();
     emits('onContextmenu',{e,info:infos.value});
} 
// 鼠标按下事件
const onHandleDownitem = (e)=>{  
     emits('onmousedown',{e,info:infos.value});
}  
// 利用事件冒泡 
</script>
<style lang="less" scoped>
.matecon{
     display: flex;
     // border: 1px dashed #007fff;
     .cons{
          width: 100%;
          height: 100%;
          overflow: hidden;
     } 
     width: 100%;
     height: 100%;
     position: relative;
     padding: 5px;
     box-sizing: border-box;
     background: #87c0fa52;
     &:hover{
           border: 1px dashed #007fff;
     }
     .dargmove{
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%; 
     }
     .allowpointer{
           position: absolute;
           width: 6px;
           height: 6px;
           background: #fff;
           border: 1px solid #007fff;
           border-radius: 50%;
           
           &.tl{
               top: -3px;
               left: -3px;
               cursor: nw-resize; 
               
           }
           &.dl{
            bottom: -3px;
            left: -3px;
            cursor: ne-resize; 
        }
        &.tr{
             top: -3px;
             right: -3px; 
             cursor: sw-resize; 
        }
        &.dr{
             right: -3px;
             bottom: -3px; 
             cursor:se-resize; 
        }
     }
}

</style>
